<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>消息-站内信</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="标题/内容">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
    <!--新增按钮-->
    <div class="clearfix">
        <div class="btn-group" style="margin-left: 4px">
            <button type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-list-ul"></i> 批量 <span class="caret"></span>
            </button>
            <div class="dropdown-menu" role="menu">
                <a id="set-readed" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-envelope-open-o"></i> 标为已读
                </a>
                <a id="set-unread" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-envelope-o"></i> 标为未读
                </a>
                <div class="dropdown-divider"></div>
                <a id="set-delete" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-times"></i> 批量删除
                </a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-tasks"></i> 更多 <span class="caret"></span>
            </button>
            <div class="dropdown-menu" role="menu">
                <a id="set-readed-all" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-envelope-open-o"></i> 全部标为已读
                </a>
                <a id="set-unread-all" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-envelope-o"></i> 全部标为未读
                </a>
                <div class="dropdown-divider"></div>
                <a id="set-delete-readed" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-times-circle-o"></i> 删除已读
                </a>
                <a id="set-delete-unread" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-times-circle-o"></i> 删除未读
                </a>
                <a id="set-delete-all" class="dropdown-item" href="javascript:void(0);">
                    <i class="fa fa-trash-o"></i> 删除全部
                </a>
            </div>
        </div>
    </div>
    <!--过滤-->
    <div style="margin-top: 10px;">
        <div class="icheck-danger d-inline">
            <input id="unread" type="radio" name="filter" checked>
            <label for="unread" class="text-danger">未读</label>
        </div>
        <div class="icheck-info d-inline" style="margin-left: 10px">
            <input id="readed" type="radio" name="filter">
            <label for="readed" class="text-info">已读</label>
        </div>
        <div class="icheck-default d-inline" style="margin-left: 10px">
            <input id="ignore" type="radio" name="filter">
            <label for="ignore" class="">所有</label>
        </div>
    </div>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th>
                <div class="icheck-primary d-inline">
                    <input id="all" type="checkbox">
                    <label for="all">全选</label>
                </div>
            </th>
            <th>标题</th>
            <th>摘要</th>
            <th>发送时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr></thead>
        <tbody><tr>
            <td>
                <div class="icheck-primary d-inline">
                    <input id="{{id}}" type="checkbox" data-id="{{id}}">
                    <label for="{{id}}">{{index}}</label>
                </div>
            </td>
            <td class="{{classtext}}"><i class="fa {{classfa}}"></i> {{message}}</td>
            <td title="{{content}}">{{summary}}</td>
            <td>{{createDate}}</td>
            <td>
                <span class="badge {{statusClass}}">
                    <i class="fa {{statusFa}}"></i>
                    {{status}}
                </span>
            </td>
            <td>
                <button class="btn btn-xs btn-outline-primary detail" data-id="{{id}}">
                    <i class="fa fa-info-circle"></i> 阅读
                </button>
                <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}">
                    <i class="fa fa-times"></i> 删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>
<!--详情-->
<div id="detail" class="side-panel right width400 bg-white hide">
    <div class="card card-info card-outline" style="box-shadow: 0 0 0;">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fa fa-envelope-open-o mr-1"></i>
                <span></span>
            </h3>
            <div class="card-tools">
                <button id="cancel" type="button" class="btn btn-xs">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body"><pre style="white-space: pre-wrap; word-wrap: break-word;"></pre></div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var tableCtrl = new TableCtrl(
        Url.baseService.letterPageByKeyword,
        Url.baseService.letterDetail,
        Url.baseService.letterCreate,
        Url.baseService.letterModify,
        Url.baseService.letterRemove,
        function (template, record, index) {
            var status = "未读";
            var statusClass = "bg-danger";
            var statusFa = "fa-envelope-o";
            if (record.readed) {
                status = "已读";
                statusClass = "bg-success";
                statusFa = "fa-envelope-open-o";
            }

            var classfa = "fa-envelope";
            var classtext = "";
            if (record.type === "ERROR") {
                classfa = "fa-bug";
                classtext = "text-danger";
            } else if (record.type === "WARN") {
                classfa = "fa-exclamation-triangle";
                classtext = "text-warning";
            } else if (record.type === "SUCCESS") {
                classfa = "fa-check-square";
                classtext = "text-success";
            } else if (record.type === "INFO") {
                classfa = "fa-bell";
                classtext = "text-info";
            }
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{message}}", "gm"), record.message)
                .replace(new RegExp("{{summary}}", "gm"), record.summary)
                .replace(new RegExp("{{content}}", "gm"), record.content)
                .replace(new RegExp("{{createDate}}", "gm"), record.createDate)
                .replace(new RegExp("{{status}}", "gm"), status)
                .replace(new RegExp("{{statusClass}}", "gm"), statusClass)
                .replace(new RegExp("{{statusFa}}", "gm"), statusFa)
                .replace(new RegExp("{{classfa}}", "gm"), classfa)
                .replace(new RegExp("{{classtext}}", "gm"), classtext);
        },
        function () {}
    );

    tableCtrl.filter = "UNREAD";
    tableCtrl.setReaded = function(id, onsuccess, oncomplete) {
        var self = this;
        $.ajax({
            url: Url.baseService.letterSetReaded.replace("{id}", id),
            type: HttpMethod.patch,
            success: function (result, status, xhr) {
                self.getById(id).readed = true;
                self.setRecords();
                if (onsuccess) onsuccess();
            },
            complete: function (xhr, ts) {
                if (oncomplete) oncomplete();
            }
        });
    };
    tableCtrl.setUnread = function(id, onsuccess, oncomplete) {
        var self = this;
        $.ajax({
            url: Url.baseService.letterSetUnread.replace("{id}", id),
            type: HttpMethod.patch,
            success: function (result, status, xhr) {
                self.getById(id).readed = false;
                self.setRecords();
                if (onsuccess) onsuccess();
            },
            complete: function (xhr, ts) {
                if (oncomplete) oncomplete();
            }
        });
    };
    tableCtrl.extraLoadStart = function() {
        $("#readed").attr("disabled", "disabled");
        $("#unread").attr("disabled", "disabled");
        $("#ignore").attr("disabled", "disabled");
    };
    tableCtrl.extraLoadComplete = function(more) {
        $("#readed").removeAttr("disabled");
        $("#unread").removeAttr("disabled");
        $("#ignore").removeAttr("disabled");
        $("#all").prop("checked", false);
    };
    tableCtrl.extraUrlSearch = function(url) {
        if (this.filter === "READED") {
            url = url + "&readed=true";
        }
        if (this.filter === "UNREAD") {
            url = url + "&readed=false";
        }
        return url;
    };
    tableCtrl.extraBind = function() {
        var self = this;
        // 绑定详情按钮
        $("#table").on("click", ".detail", function () {
            var id = $(this).attr("data-id");
            var letter = self.getById(id);
            if (!letter.readed) {
                self.setReaded(id, function () {
                    window.parent.frameCtrl.letterCtrl.getLetters();
                });
            }

            $("#detail .card-header .card-title span").html(letter.message);
            $("#detail .card-body pre").html(letter.content);
            $("#detail").removeClass("hide");
        });
        // 绑定全选按钮
        $("#all").click(function () {
            var checked = $(this).prop("checked");
            $("#table tbody input:checkbox").prop("checked", checked);
        });
        // 绑定标记为已读按钮
        $("#set-readed").click(function () {
            var checked = $("#table tbody input:checked");
            if (checked.length === 0) {
                window.parent.frameCtrl.toastr.error("尚未选择任何站内信");
            }
            var all = checked.length;
            var complete = 0;
            checked.each(function (i, n) {
                var id = $(n).attr("data-id");
                self.setReaded(id, function () {}, function () {
                    complete = complete + 1;
                    if (complete === all) {
                        window.parent.frameCtrl.letterCtrl.getLetters();
                        window.parent.frameCtrl.toastr.info("批量标记为已读任务执行结束");

                    }
                });
            });
            $("#all").prop("checked", false);
        });
        // 绑定标记为未读按钮
        $("#set-unread").click(function () {
            var checked = $("#table tbody input:checked");
            if (checked.length === 0) {
                window.parent.frameCtrl.toastr.error("尚未选择任何站内信");
            }
            var all = checked.length;
            var complete = 0;
            checked.each(function (i, n) {
                var id = $(n).attr("data-id");
                self.setUnread(id, function () {}, function () {
                    complete = complete + 1;
                    if (complete === all) {
                        window.parent.frameCtrl.letterCtrl.getLetters();
                        window.parent.frameCtrl.toastr.info("批量标记为未读任务执行结束");
                    }
                });
            });
            $("#all").prop("checked", false);
        });
        // 绑定批量删除按钮
        $("#set-delete").click(function () {
            var checked = $("#table tbody input:checked");
            if (checked.length === 0) {
                window.parent.frameCtrl.toastr.error("尚未选择任何站内信");
            }
            var all = checked.length;
            var complete = 0;
            checked.each(function (i, n) {
                var id = $(n).attr("data-id");
                self.remove(id, function () {}, function () {
                    complete = complete + 1;
                    if (complete === all) {
                        window.parent.frameCtrl.letterCtrl.getLetters();
                        window.parent.frameCtrl.toastr.info("批量删除任务执行结束");
                    }
                });
            });
            $("#all").prop("checked", false);
        });
        // 绑定显示已读按钮
        $("#readed, #unread, #ignore").click(function () {
            if ($("#readed").prop("checked")) {
                self.filter = "READED";
            }
            if ($("#unread").prop("checked")) {
                self.filter = "UNREAD";
            }
            if ($("#ignore").prop("checked")) {
                self.filter = "IGNORE";
            }
            $("#search").click();
        });
        // 绑定全部标记为已读按钮
        $("#set-readed-all").click(function () {
            $.ajax({
                url: Url.baseService.letterSetAllReaded,
                type: HttpMethod.patch,
                success: function (result, status, xhr) {
                    window.parent.frameCtrl.letterCtrl.getLetters();
                    window.parent.frameCtrl.toastr.info("已成功将所有未读站内信[" + result + "封]标记为已读");
                }
            });
        });
        // 绑定全部标记为未读按钮
        $("#set-unread-all").click(function () {
            $.ajax({
                url: Url.baseService.letterSetAllUnread,
                type: HttpMethod.patch,
                success: function (result, status, xhr) {
                    window.parent.frameCtrl.letterCtrl.getLetters();
                    window.parent.frameCtrl.toastr.info("已成功将所有已读站内信[" + result + "封]标记为未读");
                }
            });
        });
        // 绑定删除已读按钮
        $("#set-delete-readed").click(function () {
            $.ajax({
                url: Url.baseService.letterRemoveReaded,
                type: HttpMethod.delete,
                success: function (result, status, xhr) {
                    window.parent.frameCtrl.toastr.info("已成功将所有已读站内信删除，共" + result + "封");
                }
            });
        });
        // 绑定删除未读按钮
        $("#set-delete-unread").click(function () {
            $.ajax({
                url: Url.baseService.letterRemoveUnread,
                type: HttpMethod.delete,
                success: function (result, status, xhr) {
                    window.parent.frameCtrl.letterCtrl.getLetters();
                    window.parent.frameCtrl.toastr.info("已成功将所有未读站内信删除，共" + result + "封");
                }
            });
        });
        // 绑定删除全部按钮
        $("#set-delete-all").click(function () {
            $.ajax({
                url: Url.baseService.letterRemoveAll,
                type: HttpMethod.delete,
                success: function (result, status, xhr) {
                    window.parent.frameCtrl.letterCtrl.getLetters();
                    window.parent.frameCtrl.toastr.info("已成功将所有站内信删除，共" + result + "封");
                }
            });
        });
    };

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();
</script>
</body>
</html>